//登录页面(测试阶段)
import React, {Component} from 'react';
import {connect} from 'dva';
import {Row, Col, Input, Checkbox, message, Button, Icon} from 'antd';
import request from '../../utils/request';
import {requestJson} from '../../utils/request';
import config from '../../config';
import md5 from 'blueimp-md5';
import PublicService from '../../services/PublicService';
import styles from './Login.less';
import {Loginapi} from "../../services/redmoe";


class Login extends Component {
    state = {
        enter: false,
        user: '',
        pwd: '',
        code: '',
        codeImg: '',
        autoLogin: false,
        loading: false,
        codeUrl: '/hh-management-web/gnhj/login/getSignCode?t=',
        inputType: 'password'
      };
    
      componentDidMount () {
        this.tu = (e) => {
           let tu = document.getElementById("tu")
           tu.style.display="none"
           
           
        
        }
        // request(`/hh-management-web/hehui/stock/findAllPackingTypes`)
        let t = this;
        t.refreshCode();
        console.log(12)
        // PublicService.clearCookie('nickName');
        // 获取自动登录ID
        // let autoLoginId = PublicService.getCookie('rememberMeId');
        // 自动登录ID存在 则自动登录
        // if (autoLoginId) {
        //   t.setState({
        //     autoLogin: true,
        //   });
        //   request({
        //     url: '/hh-management-web/hehui/login/login',
        //     method: 'POST',
        //     data: {
        //       rememberMeId: autoLoginId,
        //       rememberMe: true
        //     }
        //   }).then(
        //     data => {
        //       console.log(data, 'data');
        //       t.checkLogin(data);
        //     }
        //   );
        // }
      }
    
    
      // input change事件
      getUserInfo (inputIndex, e) {
        let t = this;
        if (inputIndex === 'autoLogin') {
          t.setState({
            autoLogin: e.target.checked
          })
        } else {
          t.setState({
            [inputIndex]: e.target.value.trim()
          });
        }
      }
    
      // 登录按钮
      login () {
        // this.props.history.push("/controlSubject/ReportingSystem")
        let t = this;
        // if (typeof(Storage) !== "undefined") {
        //   sessionStorage.SZHJ = 'menu-list';
        //   sessionStorage.JSZX = 'menu-list';
        //   sessionStorage.XFGC = 'menu-list';
        // } else {
        //   message.warning('您的浏览器版本过低');
        // }
        // // 判断输入框是否为空
        // if (!t.state.user) {
        //   message.warning('用户名不能为空');
        //   return;
        // }
        // if (!t.state.pwd) {
        //   message.warning('密码不能为空');
        //   return;
        // }
        // if (!t.state.code) {
        //   message.warning('验证码不能为空');
        //   return;
        // }
        // PublicService.fullScreen(document.documentElement);
        t.setState({
          loading: true
        });
        let params = {
          password:md5(this.state.pwd),
          userName:this.state.user,
          v_verifyCode: t.state.code,
        };

        Loginapi({...params}).then(data => {
          console.log(data)
          if(data.data.rc == 0) {
            this.checkLogin(data.data);
            console.log(data.data)
              this.props.history.push("/cockpit")
          }
         
        }).catch((err) => {
          console.log(err)
        })
        // requestJson({url: '/hh-management-web/gnhj/login/login', method: 'POST', data:params}).then(
        //   (data) => {
        //     console.log(document.cookie, '接口后cookie');
        //     t.checkLogin(data);
        //   }
        // ).catch(() => {
        //   message.warning('登录失败');
        //   t.setState({
        //     loading: false
        //   });
        // })

      }
    
      // 判断是否登录成功
      checkLogin (data) {
        let t = this;
        this.setState({
          loading: false
        });
        this.refreshCode();
        console.log(data)
        if (data.rc == 1) {
          document.exitFullscreen ? document.exitFullscreen() :
            document.mozCancelFullScreen ? document.mozCancelFullScreen() :
              document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
          message.warning(data.err);
        } else {
          console.log('成功')
          // 保存用户登录信息
          // t.props.dispatch({type: 'login/saveUser', payload: {user: data.ret}});
          PublicService.setCookie('userId', data.ret.id);
          PublicService.setCookie('userName', data.ret.userName);
          PublicService.setCookie('nickName', data.ret.name);
          message.success('登录成功');
          // this.props.history.push({pathname: '/controlSubject/ReportingSystem'});
        }
      }
    
      // 刷新验证码
      refreshCode () {
        let t = this;
        t.setState({
          codeUrl: t.state.codeUrl + new Date().getTime()
        });
      }
    
      // 显示密码
      pwdShow () {
        let t = this;
        t.setState({
          inputType: t.state.inputType.length === 0 ? 'password' : ''
        })
      }

    
      // 键盘事件
      keyUp(e){
        let t = this;
        let code = e.charCode || e.keyCode;  //取出按键信息中的按键代码(大部分浏览器通过keyCode属性获取按键代码，但少部分浏览器使用的却是charCode)
        if (code === 13) {
          t.login();
        }
      }

      //返回按钮事件
      goBack = () => {
     
        let tu = document.getElementById("tu")
        tu.style.display="inline"
       
      }

      videoPlay1 = () => {
        this.props.history.push("/video1")
      }
    
    
      render () {
        let t = this;
        let { loading } = t.state;
        return (
          <div className={styles["bg"]} onKeyUp={(e)=>t.keyUp(e)}>
         
          <img src={require("../../assets/dlypt.png")} alt="" className={styles["zz"]} onClick={this.tu} ref="tu" id="tu"/>
            <div className={styles['wp-content']}>
            <div className={styles['player']}>
            
            <span  className={styles['player_span']} ><a target='blank' href="http://b2268w0479.imwork.net:32743/ziliao/yp.mp4">宣传片1</a></span>
            <span  className={styles['player_span']}><a target='blank' href="http://b2268w0479.imwork.net:32743/ziliao/gb.mp4">宣传片2</a></span>
            <span  className={styles['player_span']}><a target='blank' href="http://b2268w0479.imwork.net:32743/ziliao/showppt/index.html">PPT1</a></span>
            <span  className={styles['player_span']}><a target='blank' href="http://b2268w0479.imwork.net:32743/ziliao/showppt/index1.html">PPT2</a></span>
          </div>
              <div className={styles['wp-left']}>
                
                <div className={styles['wp-left-Welcome']}></div>
                
                <div className={styles['copyright']}>版权所有:苏州市伏泰信息科技有限公司</div>
                <div className={styles['copyright']}>技术支持：苏州市伏泰信息科技有限公司&nbsp;&nbsp;&nbsp; 版本号：V1.0</div>
              </div>
              <div className={styles['wp-right']}>
              <span className={styles['go_back']} onClick={this.goBack}>
                <Icon type="double-left" theme="outlined" />
                </span>
                <div className={styles['login-title']}>用&nbsp;户&nbsp;登&nbsp;录</div>
                
                <Row className={styles['wp-login-input']}>
                  <Col span={1}><Icon type="user" style={{color:'#60B0F2',fontSize:'18px'}}/> </Col>
                  <Col offset={1} span={22}>
                    <Input
                      className={styles['wp-login-user']}
                      placeholder="用户名"
                      value={t.state.user}
                      onChange={t.getUserInfo.bind(t, 'user')}/>
                  </Col>
                </Row>
                <Row className={styles['wp-login-input']}>
                  <Col span={1}><Icon type="lock" style={{color:'#60B0F2',fontSize:'18px'}}/> </Col>
                  <Col offset={1} span={21}>
                    <Input
                      type={t.state.inputType}
                      className={styles['wp-login-user']}
                      placeholder="密&nbsp;&nbsp;&nbsp;码"
                      onChange={t.getUserInfo.bind(t, 'pwd')}/>
                  </Col>
                  <Col span={1}><a><Icon type="eye-o" onClick={t.pwdShow.bind(t)} style={{color:'#60B0F2',fontSize:'18px'}}/></a> </Col>
                </Row>
                <Row className={styles['wp-login-foter']}>
                  <Col span={9} className={styles['wp-login-code']}>
                    <Col offset={1} span={2}><Icon type="safety" style={{color:'#60B0F2',fontSize:'18px'}}/> </Col>
                    <Col offset={3} span={18}>
                      <Input
                        className={styles['wp-login-yanzheng']}
                        placeholder="验证码"
                        onChange={t.getUserInfo.bind(t, 'code')}/>
                    </Col>
                  </Col>
                  <Col onClick={t.render.bind(t)} span={14}>
                    <img style={{paddingLeft:'2vw',width:'80%',height:'35px'}} onClick={t.refreshCode.bind(t)} src={t.state.codeUrl}/>
                  </Col>
                </Row>
                <Row>
                  <Col span={12} className={styles['wp-login-foter']}>
                    <Checkbox onChange={t.getUserInfo.bind(t, 'autoLogin')} style={{color:'#ccc'}}>自动登录</Checkbox>
                  </Col>
                </Row>
                <div
                  onClick={t.login.bind(t)}
                  className={styles['wp-login-btn']}
                >
                  登录
                </div>
              </div>
              {
                loading &&
                <div className={styles['wp-loading']}></div>
              }
            </div>
          </div>
        );
      }
    }
function mapStateToProps (state) {
    return {}
}
export default connect(mapStateToProps)(Login)